import IconButton from '@mui/material/IconButton';
import MenuIcon from '@mui/icons-material/Menu';
import Menu from '@mui/material/Menu';
import MenuItem from '@mui/material/MenuItem';
import React, { useState } from 'react';

interface IProps {
    setMode: React.Dispatch<React.SetStateAction<string>>;
}

export default function SwitchToggle(props: IProps) {
  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
  const open = Boolean(anchorEl);
  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
    setAnchorEl(event.currentTarget);
  };
  const handleChooseItem = (chosen: string) => {
    props.setMode(chosen);
    handleClose();
  };
  const handleClose = () => {
    setAnchorEl(null);
  }

  return (
    <div>
        <IconButton
            size="large"
            edge="start"
            color="inherit"
            aria-label="menu"
            sx={{ mr: 2 }}
            id="basic-button"
            aria-controls={open ? 'basic-menu' : undefined}
            aria-haspopup="true"
            aria-expanded={open ? 'true' : undefined}
            onClick={handleClick}    
          >
            <MenuIcon />
        </IconButton>
      <Menu
        id="basic-menu"
        anchorEl={anchorEl}
        open={open}
        onClose={handleClose}
        MenuListProps={{
          'aria-labelledby': 'basic-button',
        }}
      >
        <MenuItem onClick={() => {handleChooseItem('入侵检测')}}>入侵检测</MenuItem>
        <MenuItem onClick={() => {handleChooseItem('视频去雾')}}>视频去雾</MenuItem>
        <MenuItem onClick={() => {handleChooseItem('红外图像')}}>红外图像</MenuItem>
        <MenuItem onClick={() => {handleChooseItem('雷达图像')}}>雷达图像</MenuItem>
      </Menu>
    </div>
  );
}